<template>
  <div class="common-card">
      <div class="title">{{title}}</div>
      <div class="value">{{value}}</div>
      <div class="chart">
        <slot></slot>
      </div>
      <div class="line"></div>
      <div class="total">
        <slot name="footer"></slot>
      </div>
  </div>
</template>

<script>
export default {
  props:{
    title: String,
    value: [String,Number]  //将类型扩充为字符串和数字类型
  }
}
</script>

<style lang="scss" scoped>
.title{
  font-size: 12px;
  color: #999;
}
.value{
  font-size: 25px;
  color: #000;
  margin: 5px 0;
  letter-spacing: 1px;
}
.chart{
  height: 50px;
  // background-color: #f66;
}
.line{
  margin: 10px 0;
  border-top: 1px solid #eee;
}
.total{
  font-size: 12px;
  color: #666;
}
</style>